<template>
  <div class="way-view">
    <c-card title="通道列表" class="box-shadow">
      <el-button slot="func" type="primary" size="small" @click="addWay">添加通道</el-button>
      <el-table :data="wayList" style="width: 100%">
        <el-table-column prop="deviceName" label="序号">
          <template v-slot="{$index}">{{ $index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="channelname" label="通道名称" show-overflow-tooltip></el-table-column>
        <el-table-column label="端口号" prop="tcpPort" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row, $index}">
            <el-button size="small" type="text" @click="editWay(row)">编辑</el-button>
            <el-button size="small" type="text" @click="deleteWay(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </c-card>
    <c-dialog
      v-if="curWayInfo"
      :visible.sync="showDlg"
      :title="!curWay ? '添加通道' : '编辑通道'"
      @close="showDlg = false"
    >
      <el-form :model="curWayInfo" label-width="60px" class="demo-ruleForm" label-position="top">
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="通道名称" prop="channelname">
              <el-input v-model="curWayInfo.channelname" placeholder="请输入" size="small"></el-input>
            </el-form-item>
          </div>
          <spliter />
          <div class="row-item">
            <el-form-item label="通道类型" prop="channeltype">
              <el-select v-model="curWayInfo.channeltype" size="small" placeholder="请选择通道">
                <el-option label="全双工协议通道" :value="1"></el-option>
                <el-option label="问答式协议通道" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="通道描述" prop="channeldetails">
              <el-input v-model="curWayInfo.channeldetails" placeholder="请输入" size="small"></el-input>
            </el-form-item>
          </div>
          <spliter />
          <div class="row-item">
            <el-form-item label="所属厂站" prop="substationid">
              <el-select v-model="curWayInfo.substationid" size="small" placeholder="请选择">
                <el-option
                  v-for="s in stations"
                  :key="s.substationid"
                  :value="s.substationid"
                  :label="s.substationname"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="form-row" style="align-items: flex-start">
          <div class="row-item">
            <control-box :protocol="curWayInfo" />
          </div>
          <spliter />
          <div class="row-item">
            <host-backup :host-back="curWayInfo.protocols" @change="hostBackChange($event)" />
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button size="small" type="danger" @click="saveWayInfo">保存</el-button>
        <el-button size="small" @click="cancleWaySave">取消</el-button>
      </div>
    </c-dialog>
  </div>
</template>

<script>
import { clone } from "lodash";
import CDialog from "@/components/CDlg";
import ControlBox from "./ControlBox";
import HostBackup from "./HostBackup";
import Spliter from "@/components/Spliter";
import CCard from "@/components/CCard";
const newWayInfo = {
  protocols: [{ tcpchnltype: 1 }, { tcpchnltype: 2 }]
};
export default {
  components: {
    CDialog,
    ControlBox,
    HostBackup,
    Spliter,
    CCard
  },
  props: {
    wayList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      curWay: null,
      wayInfo: {},
      curWayInfo: newWayInfo,
      loading: false,
      showDlg: false,
      disabled: false,
      stations: []
    };
  },
  watch: {
    curWayInfo(newName, oldName) {
      console.log("new", newName)
      console.log("old", oldName)
    },
    showDlg(newName, oldName) {
      console.log("开", newName)
      console.log("关", oldName)
    }
  },
  created() {
    this._getStations();
  },
  mounted() {
    // console.log(this.wayList)
    // console.log(this.stations)
  },

  methods: {
    _getStations() {
      // const clientId = this.$store.getters.comId;
      // const params = {
      //   clientId
      // };
      return this.$axios
        .get("fes/channelt/querySubstation")
        .then(res => {
          if (res.code === 1) {
            this.stations = res.data;
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e));
    },
    getWayInfo(n) {
      console.log("2222", n)
      if (!this.curWay) return;
      if (this.curWay && this.wayInfo[this.curWay]) {
        this.curWayInfo = clone(this.wayInfo[this.curWay]);
        return;
      }
      this.loading = true;
      const params = {
        channelid: this.curWay
      };
      return this.$axios
        .get("fes/channelt/seeChanl", { params })
        .then(res => {
          const data = res.data;
          this.curWayInfo = clone(data);
          this.$set(this.wayInfo, this.curWay, data);
          this.$set(this.wayInfo, this.curWay, data);
          console.log('res.data', res.data)
        })
        .finally(() => {
          this.loading = false;
        });
    },
    hostBackChange(e, type = "add") {
      this.$set(this.curWayInfo, "protocols", e);
    },
    addWay() {
      this.showDlg = true;
      if (this.curWay) {
        this.curWayInfo = newWayInfo;
        this.curWay = null;
      }
    },
    editWay(w) {
      console.log('w', w)
      this.showDlg = true;
      if (this.curWay) return;
      this.curWay = w.channelid;
      this.getWayInfo(w.channelid);
    },
    saveWayInfo() {
      this.$confirm("确定提交?", "提示").then(() => {
        const load = this.$loading();
        return this.$axios
          .post("fes/channelt/edit", this.curWayInfo)
          .then(res => {
            if (res.code === 1) {
              this.curWay &&
                this.$set(this.wayInfo, this.curWay, this.curWayInfo);
              this.showDlg = false;
              this.curWay = null;
              this.$emit("wayChange");
              this.$message({
                message: "提交成功",
                type: "success"
              });
            } else throw res.msg;
          })
          .catch(e => this.$message.error(e))
          .finally(() => {
            load.close();
          });
      });
    },
    deleteWay(r) {
      this.$confirm(
        "删除通道可能导致某些应用错误，确定删除该通道吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          const params = {
            channelid: r.channelid
          };
          return this.$axios
            .delete("fes/channelt/delete", { params })
            .then(res => {
              if (res.code === 1) {
                this.$emit("wayChange");
              }
            });
        })
        .catch(() => {});
    },
    cancleWaySave() {
      this.curWay && (this.curWayInfo = clone(this.wayInfo[this.curWay]));
      this.showDlg = false;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
